<template>
    <div class="exam">
        <div class="exam-head">
            <div class="head-left">
                <el-select v-model="examHeadData.belongCourseId" class="select" placeholder="请选择课程">
                    <el-option v-for="course in examHeadData.courses" :label="course.label" :value="course.value"
                        @click="getExamByCourseIdSemester(course.value)" />
                </el-select>
                <el-select v-model="examHeadData.semester" class="select" placeholder="请选择学期">
                    <el-option v-for="item in semesterData" :label="item.label" :value="item.value"
                        @click="getExamBySemester()" />
                </el-select>
            </div>
            <div class="head-right">
                <el-input v-model="search" placeholder="请输入题目" class="input">
                    <template #append>
                        <el-button class="iconfont icon-sousuo3"></el-button>
                    </template>
                </el-input>
            </div>
        </div>
        <div class="exam-body">
            <div class="exam-body-left">
                <div class="content">
                    <el-card shadow="hover" v-for="(item, index) in examCardDate" :key="item.examId">
                        <div class="card-content">
                            <div class="title">{{ item.examName }}</div>
                            <div class="time"><span>开始时间：</span>{{ item.examBeginTime }}</div>
                            <div class="time"><span>结束时间：</span>{{ item.examEndTime }}</div>
                            <div><span>考试用时：</span>{{ getAnswerTime(item.examBeginTime, item.examEndTime) }}分钟</div>
                            <div><span>考试学期：</span>{{ item.semester }}</div>

                        </div>
                        <div class="bottom">
                            <div class="bottom-body">
                                <div class="bottom-left"><span class="num">0</span><span class="word">份待批阅</span> </div>
                                <el-button class="bottom-right" type="primary">查看</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
                <div class="exam-footer">
                    <div class="question-foot">
                        <el-pagination v-model:current-page="paginationData.pageNum"
                            v-model:page-size="paginationData.pageSize" :page-sizes="[20, 50, 100]"
                            :small="paginationData.small" layout="sizes, prev, pager, next"
                            :total="Number(paginationData.total)" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" class="pagination" />
                    </div>
                </div>
            </div>
            <div class="exam-body-right">
                <el-button type="primary" plain @click="checkBtn(cardDate, 'all')">全部</el-button>
                <el-button type="success" plain @click="checkBtn(cardDate, 'start')">未开始</el-button>
                <el-button type="warning" plain @click="checkBtn(cardDate, 'going')">进行中</el-button>
                <el-button type="danger" plain @click="checkBtn(cardDate, 'end')">已结束</el-button>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, reactive, onMounted, } from 'vue';
import { getCourseListAPI, getCourseByIdAPI, getExamByCourseIdSemesterAPI, selectExamPaperAPI, deleteExamAPI, getExamDetailAPI } from '@/api/api'
import { ElMessage } from 'element-plus';

const examCardDate = ref()
//切换状态时
const cardDate = ref()
const examHeadData = ref({
    //学期
    semester: '',
    //所属课程
    belongCourseId: '',
    //获取到的所有课程
    courses: [],
    //课程列表
    courseList: [],
})
//试卷分页
const paginationData = reactive({
    pageSize: 20,
    total: 0,
    pageNum: 1,
    background: false,
    disabled: false,
    small: '',
})
//查找
const search = ref('')
//学期
const semesterData = reactive([
    {
        label: '2022年上学期',
        value: '2022年上学期'
    },
    {
        label: '2022年下学期',
        value: '2022年下学期'
    },
    {
        label: '2023年上学期',
        value: '2023年上学期'
    },
    {
        label: '2023年下学期',
        value: '2023年下学期'
    },
    {
        label: '2024年上学期',
        value: '2024年上学期'
    },
    {
        label: '2024年下学期',
        value: '2024年下学期'
    },
])
onMounted(() => {
    //获取课程信息
    getCourseList()
})
//计算考试时长
const getAnswerTime = (start, end) => {
    let staytimeGap = new Date(end).getTime() - new Date(start).getTime();
    let minutes = parseInt(staytimeGap / 60000) // 得到分钟数
    if (!minutes) {
        return '0'
    }
    minutes = String(minutes)
    return minutes
}
//分页查询课程
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        if (res.data.code == 200) {
            examHeadData.value.courseList = res.data.data.list
            getCourseName(examHeadData.value.courseList)
            if (sessionStorage.getItem('fontExamCourseId')) {
                getExamByCourseIdSemester(sessionStorage.getItem('fontExamCourseId'))
                getCourseById(sessionStorage.getItem('fontExamCourseId'))
            }
        }
    })
}
//获取课程名
const getCourseName = (courseList) => {
    for (let item of courseList) {
        examHeadData.value.courses.push({
            label: item.courseName,
            value: item.id
        })
    }
}
//根据课程id查询课程名（单查）
const getCourseById = async (id) => {
    await getCourseByIdAPI(id).then(res => {
        examHeadData.value.belongCourseId = res.data.data.courseName
    })
}
//当一页的数量改变
const handleSizeChange = (newPageSize) => {
    paginationData.pageSize = newPageSize
    getExamByCourseIdSemester(sessionStorage.getItem('fontExamCourseId'))
}
//第几页
const handleCurrentChange = (newCurrentPage) => {
    paginationData.pageNum = newCurrentPage
    getExamByCourseIdSemester(sessionStorage.getItem('fontExamCourseId'))
}
//根据课程id查询考试列表
const getExamByCourseIdSemester = async (id) => {
    sessionStorage.setItem('fontExamCourseId', id)
    await getExamByCourseIdSemesterAPI(id, paginationData.pageNum, paginationData.pageSize, examHeadData.value.semester).then(res => {
        examCardDate.value = res.data.data.list
        cardDate.value = res.data.data.list
    })
}
//根据学期获取考试列表
const getExamBySemester = ()=>{
    if(sessionStorage.getItem('fontExamCourseId')){
        getExamByCourseIdSemester(sessionStorage.getItem('fontExamCourseId'))
    }else{
        ElMessage.warning('请选择课程！')
    }
}
//获取现在时间
const getNowDate = () => {
    let date = new Date();
    var y = date.getFullYear();
    var m =
        date.getMonth() + 1 < 10 ?
            "0" + (date.getMonth() + 1) :
            date.getMonth() + 1;
    var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hour = date.getHours().toString().padStart(2, '0'); // 时
    var minute = date.getMinutes().toString().padStart(2, '0'); // 分
    var second = date.getSeconds().toString().padStart(2, '0'); // 秒
    var formatdate = y + "-" + m + "-" + d + " " + hour + ":" + minute + ":" + second;
    return formatdate;
}
//筛选不同的考试状态
const checkBtn = (value, key) => {
    let date = getNowDate() // 获取当前日期 YYYY-MM-DD
    if (key == 'all') {
        getExamByCourseIdSemester(sessionStorage.getItem('fontExamCourseId'))
        return
    }
    else if (key == 'start') {
        examCardDate.value = value.filter(item => {
            return item.examBeginTime > date
        })
    }
    else if (key == 'going') {
        examCardDate.value = value.filter(item => {
            return item.examBeginTime < date && item.examEndTime > date
        })
    }
    else if (key == 'end') {
        examCardDate.value = value.filter(item => {
            return item.examEndTime > date
        })
    }
}





</script>


<style lang="less">
.el-card {
    border-radius: 0;
}

.el-card__body {
    padding: 0;

}
</style>

<style lang="less" scoped>
.exam {
    width: 80vw;
    height: 91vh;
    margin: 0 auto;
    background-color: #fff;

    .exam-head {
        display: flex;
        justify-content: space-between;
        padding: 20px 40px;
        border-bottom: 1px solid rgb(243, 242, 242);


        .head-left {
            display: flex;

            .select {
                width: 160px;
                margin-right: 10px;
            }
        }

        .head-right {
            display: flex;
        }
    }

    .exam-body {
        min-height: 78vh;
        display: flex;

        .exam-body-left {
            border: 5px solid #EBEEF5;
            width: 80vw;
            margin: 20px;
            border-radius: 10px;

            .content {
                margin: 10px 60px;
                height: 66vh;
                width: 800px;
                overflow: scroll;
                display: flex;
                flex-wrap: wrap;


                .el-card {
                    border: 2px solid #DCDFE6;
                    width: 320px;
                    height: 200px;
                    margin: 25px 25px 0 25px;
                    position: relative;
                    transform: scale(1);

                    .card-content {
                        padding: 15px 20px;
                        color: #909399;
                        font-weight: 550;

                        .title {
                            font-size: 19px;
                            color: #606266;
                            display: flex;
                            justify-content: center;
                            margin-bottom: 5px;
                        }

                        span {
                            color: #606266;
                        }

                        div {
                            margin-top: 2px;
                        }

                    }

                    .bottom {
                        height: 48px;
                        width: 320px;
                        background-color: #F2F6FC;

                        .bottom-body {
                            display: flex;
                            justify-content: space-between;
                            padding: 0 25px;

                            .bottom-left {
                                padding: 15px 0;

                                .num {
                                    font-size: 20px;
                                    font-weight: 550;
                                    margin-right: 2px;
                                    color: #409EFF;
                                }

                                .word {
                                    font-size: 13px;

                                }
                            }

                            .bottom-right {
                                margin: 10px 0;
                            }

                        }
                    }
                }
            }



            .exam-footer {
                overflow: hidden;
                display: flex;
                justify-content: center;

                .question-foot {
                    display: flex;
                    justify-content: center;

                    .pagination {
                        margin-bottom: 10px;

                    }

                }
            }
        }

        .exam-body-right {
            border: 5px solid rgb(198, 226, 255);
            width: 20vw;
            margin: 20px 20px 20px 0;
            border-radius: 10px;
            display: block;
            padding: 10px 20px;

            .el-button {
                width: 180px;
                margin: 5px auto;
            }


        }
    }


}
</style>